<template>
  <div class="pcSetting">
    <div class="right-content">
      <Form>
        <div class="title">广告配置</div>
        <div class="swiperBlock" v-if="pcDataJson.bannerList.length">
          <div class="swiperItem">
            <Swiper
              class="swiper-banner"
              :swiperOption="swiperOption"
              :data="pcDataJson.bannerList"
              :imgStyle="'width:100%;height:160px'"
            ></Swiper>
          </div>
        </div>
        <div class="config">
          <Button type="primary" @click="addAction('bannerList')">新增广告</Button>
          <span style="color:grey">建议上传图片745x160，跳转链接格式</span>
        </div>
        <div class="content">
          <!-- {{bannerListCount}} -->
          <!-- {{formItem.label_content}} -->
          <ul>
            <Row v-for="(item, index) in pcDataJson.bannerList" :key="index">
              <div class="content-item">
                <div class="content-item-left">
                  <div class="content-height">
                    <div class="banner-image-title">上传图片</div>
                    <div @click="saveCurrentIndex(index)">
                      <div class="banner-image" v-if="item.image_url != ''">
                        <img style="width:100%;height:100%" :src="item.image_url" />
                        <div class="banner-image-upload">
                          <upload :multiple="true" :spread="true" @confirmUpload="confirmUpload"></upload>
                        </div>
                      </div>
                      <div v-else class="banner-image-add">
                        <div class="banner-image-add-text">+ 添加图片</div>
                        <upload :multiple="true" :spread="true" @confirmUpload="confirmUpload"></upload>
                      </div>
                    </div>
                  </div>
                  <div class="content-bottom">
                    <div class="banner-image-title">跳转链接</div>
                    <Select v-model="item.type" style="width:100px;margin-top:10px">
                      <Option
                        v-for="item in bannerTypeList"
                        :value="item"
                        :key="item"
                      >{{skipContent(item)}}</Option>
                    </Select>
                    <Input
                      v-if="item.type != 'default'"
                      style="width:200px;margin-top:10px;margin-left:10px"
                      v-model="item.number"
                      :placeholder="placeholderContent(item.type)"
                    ></Input>
                  </div>
                </div>
                <!-- 操作图标 -->
                <div class="content-item-right">
                  <div class="content-item-right-icon">
                    <Icon
                      class="content-item-right-icon-item"
                      @click="changeIndex('bannerList','up',index)"
                      v-if="index != 0"
                      size="30"
                      type="md-arrow-round-up"
                    />
                    <Icon
                      class="content-item-right-icon-item"
                      @click="changeIndex('bannerList','down',index)"
                      v-if="index != (bannerListCount-1)"
                      size="30"
                      type="md-arrow-round-down"
                    />
                    <Icon
                      class="content-item-right-icon-item"
                      @click="deleteAction('bannerList',index)"
                      size="30"
                      type="ios-trash"
                    />
                  </div>
                </div>
              </div>
            </Row>
          </ul>
        </div>
        <div class="title">友情链接配置</div>
        <div class="config">
          <Button type="primary" @click="addAction('friendList')">新增友情链接</Button>
          <!-- <span style="color:grey">建议上传图片690x300，跳转链接格式</span> -->
        </div>
        <div class="wangContent">
          <div class="conItem" v-for="(item,index) in pcDataJson.friendList" :key="index">
            <div class="itemLeft">
              <div class="name">链接名称</div>
              <Input v-model="item.name" placeholder="请输入链接名称" style="width: 150px" />
              <Input v-model="item.url" placeholder="请输入链接,示例：https://banchengyun.com" style="width: 300px" />
            </div>
            <div class="itemRight">
              <Icon
                class="content-item-right-icon-item"
                @click="changeIndex('friendList','up',index)"
                v-if="index != 0"
                size="30"
                type="md-arrow-round-up"
              />
              <Icon
                class="content-item-right-icon-item"
                @click="changeIndex('friendList','down',index)"
                v-if="index != (bannerListCount-1)"
                size="30"
                type="md-arrow-round-down"
              />
              <Icon
                class="content-item-right-icon-item"
                size="30"
                type="ios-trash"
                @click="deleteAction('friendList',index)"
              />
            </div>
          </div>
        </div>
        <div class="title">热门搜索设置</div>
        <div class="wangContent">
          <Tag
            v-for="(item,index) in pcDataJson.hotSearch"
            :key="index"
            closable
            @on-close="keyDelete"
            :name="item"
          >{{item}}</Tag>
          <div class="msgItem">
            <Input v-model="hotSearchTemp" placeholder="请输入热门搜索关键词" style="width: 300px" />
            <Button type="primary" @click="chooseHotKey">确定</Button>
          </div>
        </div>
        <div class="title">关于我们</div>
        <div class="wangContent">
          <div class="msgItem">
            <div class="name">公司地址</div>
            <Input
              v-model="pcDataJson.about.companyAddress"
              placeholder="请输入公司地址"
              style="width: 300px"
            />
          </div>
          <div class="msgItem">
            <div class="name">联系方式</div>
            <Input
              v-model="pcDataJson.about.companyPhone"
              placeholder="请输入联系方式"
              style="width: 300px"
            />
          </div>
          <div class="msgItem">
            <div class="name">公司邮箱</div>
            <Input
              v-model="pcDataJson.about.companyEmail"
              placeholder="请输入公司邮箱"
              style="width: 300px"
            />
          </div>
        </div>
        <div class="button">
          <Button type="primary" @click="updateBannerList">保存</Button>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>
import { IndexComponet, IndexComponetUpdate } from "api/recuit/setting";
import Swiper from "@/components/consumer/swiper";

import { swapArray } from "common/js/util";
import _ from "lodash";
import upload from "base/upload/upload";

export default {
  name: "pcSetting",
  data() {
    return {
      pcDataJson: {
        bannerList: [],
        friendList: [],
        about: {
          companyAddress: "",
          companyPhone: "",
          companyEmail: ""
        },
        hotSearch: []
      },
      formItem: {
        label_id: "",
        label_content: ""
      },
      bannerTypeList: ["positionDetail", "companyDetail", "default"],
      currentImageIndex: 0,
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination"
        }
      },
      hotSearchTemp: ""
    };
  },
  components: {
    upload,
    Swiper
  },
  computed: {},
  watch: {},
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      //banner组件信息
      let bannerComponet = await IndexComponet({ type: "pc_banner" }).catch(
        err => {
          this.$Message.error("系统错误，请联系技术人员。" + err);
        }
      );

      if (!_.isNull(bannerComponet.componetInfo)) {
        this.pcDataJson = JSON.parse(bannerComponet.componetInfo.label_content);
        this.formItem.label_id = bannerComponet.componetInfo.label_id;
      }
    },
    placeholderContent(bannerType) {
      switch (bannerType) {
        case "positionDetail":
          return "请输入职位ID";
          break;
        case "companyDetail":
          return "请输入商家ID";
          break;
        // case "topic":
        //   return "请输入专题ID";
        case "default":
          return "";
        default:
          break;
      }
    },
    skipContent(bannerType) {
      switch (bannerType) {
        case "positionDetail":
          return "职位";
          break;
        case "companyDetail":
          return "商家";
          break;
        // case "topic":
        //   return "专题";
        case "default":
          return "不跳转";
          break;
        default:
          break;
      }
    },
    async updateBannerList() {
      this.formItem.label_content = JSON.stringify(this.pcDataJson);
      await IndexComponetUpdate({ ...this.formItem, type: "pc_banner" }).catch(
        err => {
          this.$Message.error("系统错误，请联系技术人员。" + err);
        }
      );

      this.$Message.success("操作成功");
      setTimeout(() => {
        this.$router.go(0);
      }, 1000);
    },
    saveCurrentIndex(index) {
      this.currentImageIndex = index;
    },
    // 图片上传完成之后的回调
    confirmUpload(imageArr) {
      this.pcDataJson.bannerList[this.currentImageIndex].image_url =
        imageArr[0];
    },

    addAction(type) {
      switch (type) {
        case "friendList":
          this.pcDataJson[type].push({
            name: "",
            url: ""
          });
          break;
        case "bannerList":
          this.pcDataJson[type].push({
            image_url: "",
            type: "default",
            number: ""
          });
          break;

        default:
          break;
      }
    },
    deleteAction(type, index) {
      this.pcDataJson[type].splice(index, 1);
    },
    confirmMpCode(imageArr) {
      this.pcDataJson.codeList.mpCode = imageArr[0];
    },
    confirmOaCode(imageArr) {
      this.pcDataJson.codeList.oaCode = imageArr[0];
    },
    changeIndex(type, action, index) {
      if (action == "up") {
        this.pcDataJson[type] = swapArray(
          this.pcDataJson[type],
          index - 1,
          index
        );
      } else if (action == "down") {
        this.pcDataJson[type] = swapArray(
          this.pcDataJson[type],
          index + 1,
          index
        );
      }
    },
    chooseHotKey() {
      let temp = [];
      if (this.pcDataJson.hotSearch) {
        temp = this.pcDataJson.hotSearch;
      }
      for (let i in this.pcDataJson.hotSearch) {
        if (this.pcDataJson.hotSearch[i] == this.hotSearchTemp) {
          this.$Message.warning("关键词不可重复");
          return
        }
      }
      temp.push(this.hotSearchTemp);
      this.hotSearchTemp = ''
      this.pcDataJson.hotSearch = temp;
    },
    keyDelete(e, name) {
      for (let i in this.pcDataJson.hotSearch) {
        if (this.pcDataJson.hotSearch[i] == name) {
          this.pcDataJson.hotSearch.splice(i, 1);
        }
      }
    }
  }
};
</script>

<style scoped lang="less">
.opt-icon {
  width: 100px;
  height: 100px;
}
.pcSetting {
  display: flex;
  flex-direction: row;
  padding: 2%;
  background: white;
  width: 100%;
  height: 100%;
  .left-content {
    width: 25%;
    height: 100%;
    border: 1px solid #f5f5f5;
    .swiper-banner {
      height: 180px;
      .swiper-img {
        width: 100%;
        height: 180px;
      }
    }
  }
  .right-content {
    width: 100%;
    .title {
      margin-bottom: 20px;
      padding: 8px 16px;
      font-weight: bolder;
      background-color: #f5f5f5;
      color: #333;
    }
    .config {
      margin-left: 20px;
      padding-bottom: 15px;
      border-bottom: 2px solid #f5f5f5;
    }
    .content {
      &:after {
        // // border-bottom: none;
        // content: "asdsd";
        // margin-top: -1px;
      }
      .content-item {
        display: flex;
        flex-direction: row;
        padding: 15px;
        border-bottom: 2px solid #f5f5f5;

        .content-item-left {
          width: 76%;
          .content-height {
            display: flex;
            flex-direction: row;
            .banner-image-title {
              margin-left: 10px;
              margin-right: 10px;
              line-height: 90px;
              text-align: center;
              vertical-align: middle;
            }
            .banner-image {
              cursor: pointer;
              width: 447px;
              height: 96px;
              overflow: hidden;

              // height: 50px;
              .banner-image-upload {
                width: 447px;
                height: 96px;
                position: absolute;
                bottom: 73px;
              }
            }
            .banner-image-add {
              padding: 5px;
              border: 1px solid #ddd;
              border-radius: 5px;
              position: relative;
              top: 0;
              left: 0;
              overflow: hidden;
              cursor: pointer;
              width: 90px;
              height: 90px;
            }
            .banner-image-add-text {
              margin-bottom: 0;
              font-weight: 400;
              text-align: center;
              vertical-align: middle;
              -ms-touch-action: manipulation;
              touch-action: manipulation;
              cursor: pointer;
              background-image: none;
              border: 1px solid transparent;
              white-space: nowrap;
              line-height: 86px;
            }
          }
          .content-bottom {
            display: flex;
            flex-direction: row;
            .banner-image-title {
              margin-left: 10px;
              margin-right: 10px;
              line-height: 50px;
              text-align: center;
              vertical-align: middle;
            }
          }
        }
        .content-item-right {
          width: 20%;
          position: relative;
          .content-item-right-icon {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            height: 100%;
            .content-item-right-icon-item {
              cursor: pointer;
            }
          }
        }
      }
      .content-item:last-child {
      }
    }
    .button {
      margin-left: 50%;
    }
    .theme-input {
      width: 90px;
      margin-right: 10px;
    }
    .alert {
      color: rgb(153, 153, 153);
      margin-left: 82px;
    }

    .wangContent {
      width: 100%;
      .conItem {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        justify-content: space-between;
        .itemLeft {
          display: flex;
          align-items: center;
          div {
            margin-right: 10px;
          }
        }
        .itemRight {
          width: 10%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          margin-right: 20%;
        }
      }
      .msgItem {
        display: flex;
        padding: 10px 20px;
        align-items: center;
        div {
          margin-right: 10px;
        }
      }
    }
    .swiperBlock {
      width: 100%;
      display: flex;
      margin-left: 20px;
      height: 200px;
      .swiperItem {
        width: 745px;
        height: 160px;
      }
    }
    .brand-item-logo {
      width: 100px;
      height: 100px;
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 5px;
      cursor: pointer;
      position: relative;
      top: 0;
      left: 0;

      img {
        width: 100%;
      }
    }
    .brand-item-environment {
      width: 214px;
      height: 120px;
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 5px;
      position: relative;
      top: 0;
      left: 0;
      margin-left: 15px;
      overflow: hidden;
      margin-top: 10px;

      &:nth-of-type(2n + 1) {
        margin-left: 0;
      }

      img {
        width: 100%;
        height: 100%;
        float: left;
      }

      & > .close {
        background: red;
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
        color: #fff;
      }
    }

    .old-brand-item-environment {
      margin-left: 0;
      cursor: pointer;
    }

    .new-add-brand-item-environment {
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 5px;
      position: relative;
      top: 0;
      left: 0;
      margin-left: 15px;
      overflow: hidden;
      margin-left: 15px;
      cursor: pointer;
      width: 100px;
      height: 100px;
      margin-top: 29px;

      &:nth-of-type(2n + 1) {
        margin-left: 0;
      }

      img {
        width: 100%;
        height: 100%;
        float: left;
      }

      & > .close {
        background: red;
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
        color: #fff;
      }
    }
  }
}
</style>


